<template>
  <div ref="chart1" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue'
// 引入接口
import { reqPieAPI } from '@/api/visual/index'

const chart1 = ref()
const { proxy } = getCurrentInstance() as any
const datas = ref([])
// 发起请求的函数
const init = async () => {
  let res = await reqPieAPI()
  if (res.code === 200) {
    datas.value = res.data.datas
  }
}
onMounted(() => {
  init().then(() => {
    // 获取挂载的组件实例
    const echarts = proxy.$ECharts
    //初始化挂载
    const echarts1 = echarts.init(chart1.value)
    //添加配置
    echarts1.setOption({
      legend: {
        orient: 'vertical',
        x: 'left',
        data: datas.value.map((item) => item.name),
        textStyle: {
          color: '#FF9900', // 设置字体颜色为番茄红
        },
      },
      tooltip: {
        trigger: 'item', // 鼠标悬停在数据项时触发 tooltip
        formatter: '{b}: {d}%', // 显示标签名和对应的百分比
      },
      graphic: {
        elements: [
          {
            type: 'image',
            style: {
              //image: giftImageUrl,
              width: 30,
              height: 30,
            },
            left: 'center',
            top: 'center',
          },
        ],
      },
      series: [
        {
          type: 'pie',
          radius: [30, '55%'],
          center: ['50%', '50%'],
          roseType: 'radius',
          color: ['#959393', '#E61E24', '#FF9900', '#B6B33F'],
          data: datas.value,
          label: {
            normal: {
              textStyle: {
                fontSize: 14,
              },
              formatter: function (param) {
                return param.name
              },
            },
          },
          labelLine: {
            normal: {
              smooth: true,
              lineStyle: {
                width: 2,
              },
            },
          },
          itemStyle: {
            normal: {
              shadowBlur: 30,
              shadowColor: 'rgba(0, 0, 0, 0.4)',
            },
          },

          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return Math.random() * 200
          },
        },
      ],
    })
    // 自适应
    window.onresize = function () {
      echarts1.resize()
    }
  })
})
</script>

<style lang="scss" scoped></style>
